<template>
    <div class="bei">
        <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
        <div class="top">
            <van-image round width="5rem" height="5rem"
                src="https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500" />
            <div class="pan">
                <span v-if="!user"  @click="$myRouter.push('/login')">立即登录</span>
                <span v-if="user">欢迎您：admin</span>
            </div>
        </div>
        <div class="bodya">
            <van-collapse >
                <van-collapse-item title="我的订单" name="1">我的订单</van-collapse-item>
                <van-collapse-item title="我的地址" name="2">我的地址</van-collapse-item>
                <van-collapse-item title="我的关注" name="3">我的关注</van-collapse-item>
                <van-collapse-item title="退出登录" @click="tui" name="4">
                    <span >点我退出登录</span>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>

<script name="sdySelf" lang="ts" setup>
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant';
const $myRouter = useRouter()

const user = window.localStorage.getItem('token')

const tui = ()=>{
   window.localStorage.removeItem('token')
   window.localStorage.removeItem('user_id')
   showSuccessToast('退出成功  即将回到主页');
   setTimeout(() => {
    $myRouter.push('/home')
   }, 1000);
}

</script>

<style scoped lang="scss">
.bei {
    width: 100%;
    height: 100%;
    background-color: #ccc;

    .top {
        width: 100%;
        height: 160px;
        background: url('https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png');
        background-size: 100% 160px;
        position: relative;
        .van-image {
            margin-top: 40px;
            margin-left: 30px;
        }

        .pan {
            span {
                color: #fff;
                margin-left: 135px;
                position: absolute;
                top: 50px;
                margin-top: 16px;
            }
        }


    }
}
</style>

